<template>
<div class="view-box">
  <p >{{title}}</p>
  <Tabs v-model="tabKey" class="tabs-app">
    <template #extra>
        <el-tooltip class="item" effect="dark" placement="left-start">
          <div slot="content" class="table-tip-box">
            <p class="tip-title">标识说明:</p>
            <div class="table-tip-content">
              <div class="green-tip">
              </div>
              <div>
                <p>目标/现状表单元格：应用变化为建设完成</p>
                <p>目标/现状表行列：新增应用/组织</p>
                <p>计算表单元格：数值上升</p>
                <p>计算表行：新增应用</p>
              </div>
            </div>
            <div class="table-tip-content">
              <div class="red-tip">
              </div>
              <div>
                <p>目标/现状表单元格：应用变化为规划中/不涉及</p>
                <p>目标/现状表行列：减少应用/组织</p>
                <p>计算表单元格：数值下降</p>
                <p>计算表行：减少应用</p>
              </div>
            </div>
            <div class="table-tip-content">
              <div class="orange-tip">
              </div>
              <div>
                <p>计算表单元格：文本类描述变化</p>
              </div>
            </div>
          </div>
          <Icon class="legend-icon" type="ios-help-circle-outline"/>
        </el-tooltip>
    </template>
    <TabPane label="数字化覆盖率计算表" name="calculation" class="tab-pane">
      <!-- <RPIframe v-if="tabKey == 'calculation' && initFinish" :src="calculationUrl"></RPIframe> -->
      <pageTable v-if="tabKey == 'calculation' && initFinish" type="rate" :trgNode="trgnode"></pageTable>
    </TabPane>
    <TabPane label="2022年数字化覆盖现状" name="present" class="tab-pane">
      <!-- <RPIframe v-if="tabKey == 'present' && initFinish" :src="presentUrl"></RPIframe> -->
      <pageTable v-if="tabKey == 'present' && initFinish" type="status" :trgNode="trgnode"></pageTable>
    </TabPane>
    <TabPane label='“十四五”数字化覆盖目标' name="target" class="tab-pane">
      <pageTable v-if="tabKey == 'target' && initFinish" type="target" :trgNode="trgnode"></pageTable>
      <!-- <RPIframe v-if="tabKey == 'target' && initFinish" :src="targetUrl"></RPIframe> -->
    </TabPane>
  </Tabs>
</div>

</template>

<script>
import RPIframe from '@/components/common/RPIframe.vue'
import coverApi from '@/api/cover.js'
import pageTable from './pageTable.vue'
export default {
  name: 'viewReportStatistic',
  components: {
    RPIframe,
    pageTable
  },
  props: {
    code: {
      type: String,
      default: ''
    },
    parentCode: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    trgnode: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tabKey: 'calculation',
      initFinish: false,
      onlineSysDomain: '',
      calculationTableCodeMap: {},
      presentTableCodeMap: {},
      targetTableCodeMap: {},
      calculationUrl: '',
      presentUrl: '',
      targetUrl: '',
    }
  },
  created: function () {
    this.init()
  },
  methods: {
    init() {
      this.getTableCodeMap()
    },
    // 构建查看url
    _getUrl() {
      let tableCode = this.calculationTableCodeMap[this.trgnode]
      if (tableCode && this.onlineSysDomain) {
        this.calculationUrl = this.onlineSysDomain + '/rpt-server/rdppage/main/' + tableCode
      }

      tableCode = this.presentTableCodeMap[this.trgnode]
      if (tableCode && this.onlineSysDomain) {
        this.presentUrl = this.onlineSysDomain + '/rpt-server/rdppage/main/' + tableCode
      }

      tableCode = this.targetTableCodeMap[this.trgnode]
      if (tableCode && this.onlineSysDomain) {
        this.targetUrl = this.onlineSysDomain + '/rpt-server/rdppage/main/' + tableCode
      }
    },
    // 通过值集获取tableCode和业务单元的映射关系、在线表单域名
    getTableCodeMap() {
      const getTargetTableCodeMap = coverApi.getCodeList('SHARE_145_PLAN_TABLE_CODE').then((res) => {
        return res.data
      })
      const getPresentTableCodeMap = coverApi.getCodeList('SHARE_145_2022_TABLE_CODE').then((res) => {
        return res.data
      })
      const getCalculationTableCodeMap = coverApi.getCodeList('SHARE_145_COUNT_TABLE_CODE').then((res) => {
        return res.data
      })
      const getOnlineSysDomain = coverApi.getCodeList('ONLINE_SYS_DOMAIN').then((res) => {
        try {
          let arr1 = res.data.split('//')
          let str1 = arr1[0]
          let domain = arr1[1].split('/')[0]
          return str1 + '//' + domain
        } catch (error) {
          console.log(error)
        }
      })
      Promise.all([getTargetTableCodeMap, getPresentTableCodeMap, getCalculationTableCodeMap, getOnlineSysDomain]).then(res => {
          let records = res[0].records
          if (records.length > 0) {
            records.forEach(item => {
              this.targetTableCodeMap[item.vsiValue] = item.vsiDescription
            });
          }

          records = res[1].records
          if (records.length > 0) {
            records.forEach(item => {
              this.presentTableCodeMap[item.vsiValue] = item.vsiDescription
            });
          }

          records = res[2].records
          if (records.length > 0) {
            records.forEach(item => {
              this.calculationTableCodeMap[item.vsiValue] = item.vsiDescription
            });
          }

          records = res[3].records
          if (records.length > 0) {
            this.onlineSysDomain = records[0].vsiDescription
          }

          this._getUrl()
          this.initFinish = true
      });
    }
  }
}
</script>

<style lang="less" scoped>
.view-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  p {
    height: 40px;
    font-size: 16px;
    font-weight: bold;
    padding: 10px;
  }
  .tabs-app {
    flex: 1;
    display: flex;
    flex-direction: column;
    /deep/.ivu-tabs-content {
      height: calc(100% - 73px);
    }
  }
}
.legend-icon {
  margin-top: 12px;
  font-size: 24px;
  margin-right: 10px;
}
</style>
<style lang="less">
.table-tip-content {
  display: flex;
  font-size: 16px;
}
.tip-title {
  font-size: 18px;
  margin-bottom: 5px;
}
  .green-tip,.red-tip,.orange-tip {
    width: 40px;
    height: 18px;
    margin-right: 10px;
  }
  .green-tip {
    background: #C8E39B;
  }
  .red-tip {
    background: #F4B5B5;
  }
  .orange-tip {
    background: #F8D1AD;
  }
</style>
